<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商品名称">
                <a-input allow-clear placeholder="请输入商品名称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="getList">
          <a-radio-button value="0"> 待处理 </a-radio-button>
          <a-radio-button value="1"> 已拣货 </a-radio-button>
          <a-radio-button value="2"> 已发货 </a-radio-button>
          <a-radio-button value="3"> 已收货 </a-radio-button>
        </a-radio-group>

        <div>
<!--          <a-dropdown>-->
<!--            <a-menu slot="overlay">-->
<!--              <a-menu-item @click="batch('3')">批量收货</a-menu-item>-->
<!--            </a-menu>-->
<!--            <a-button> 批量操作 </a-button>-->
<!--          </a-dropdown>-->
        </div>
      </div>

      <OrderListTable ref="table" :orderList="list" @print="print" @triggerAction="triggerAction"></OrderListTable>

      <div style="float: right;margin-top:10px;">
        <a-pagination v-model="queryParam.page" @change="tablePageChange" :total="totalCount" />
      </div>
    </a-card>

    <OrderPrintModal :visible.sync="isShowPrintModal" :order="orderInfo"></OrderPrintModal>
  </page-header-wrapper>
</template>

<script>
import { getDistributionList, merchantSetDistributionStatus } from '@/api/purchase/supplier'
import OrderListTable from './components/OrderListTable.vue'
import OrderPrintModal from './components/OrderPrint.vue'

export default {
  components: {
    OrderListTable,
    OrderPrintModal
  },
  data() {
    return {
      queryParam: {
        page: 1,
        limit: 10,
        status: '0',
        name: ''
      },
      list: [],
      orderInfo: null,
      isShowPrintModal: false
    }
  },

  created() {
    this.getList()
  },

  methods: {
    print(row) {
      this.orderInfo = row
      this.isShowPrintModal = true
    },

    setDistributionStatus(ids, status) {
      this.$confirm({
        title: '提示',
        content: '是否执行此次操作？',
        onOk: () => {
          merchantSetDistributionStatus({
            ids,
            status
          }).then(res => {
            if (!res.code) {
              this.tablePageChange(1)
              this.$message.success(res.msg)
              return
            }

            this.$message.error(res.msg)
          })
        },
        onCancel() {}
      })
    },

    batch(type) {
      let { selectedRowKeys } = this.$refs.table
      if (!selectedRowKeys.length) {
        this.$message.error('至少选择一条数据！')
        return
      }

      this.setDistributionStatus(selectedRowKeys.map(el => el.id).join(','), type)
    },

    triggerAction({ type, order }) {
      this.setDistributionStatus(order.id, type)
    },

    // 分页请求
    tablePageChange(e) {
      this.queryParam.page = e
      this.getList()
    },

    // 获取数据
    async getList() {
      const hide = this.$message.loading('加载中...', 1000)
      const res = await getDistributionList(this.queryParam)
      if (res.code == 0) {
        let list = res.data.data || []

        list = list.map(el => {
          let goods = el.goods

          goods.forEach(cel => {
            if (cel.goods_attr) {
              cel.goods_attr = JSON.parse(cel.goods_attr)
            } else {
              cel.goods_attr = []
            }
          })

          return el
        })

        this.list = list
        this.totalCount = res.data.count

        this.$refs.table.selectedRowKeys = []
      }
      hide()
    },

    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.queryParam.start_time = e[0]
        this.queryParam.end_time = e[1]
      } else {
        this.queryParam.start_time = ''
        this.queryParam.end_time = ''
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
